<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="col-md-2"></div>
        <div class="col-md-8 box">
        <table class="table ">
            <thead>
                <tr>
                    <th></th>
                    <th>ID</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <h2 v-if="sumprices">啥也没了</h2>
            <tbody>
                <tr v-for="(item,index) in arr" class="trr">
                    <td><input type="checkbox" :checked="item.checked"  @click="choose(index);zongjia()" ></td>
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.sum}}</td>
                    <td>
                        <button class="btn jian" @click="item.sum -=1;zongjia()" v-if="item.sum>1" >减</button>
                        <button class="btn jia" @click="item.sum +=1;zongjia()">加</button>
                        <button class="btn remove" @click="remove();zongjia();pd()">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span class="sp">总价:${{sumprice}}</span>
            <button class="btn qk" @click="qbrem();zongjia();pd()">清空购物车</button>
            <!-- <button class="btn" @click="All();zongjia();pd()">全选</button> -->
            <button class="btn all" @click="all();zongjia();pd()">全选</button>
            <button class="btn qc" @click="qc();zongjia();pd()">清除 </button>
            <button class="btn fx" @click="fx();zongjia();pd()">反选</button>
        </div>
    </div>

    </div>  

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                arr:[
                    {
                        name:'苹果',
                        price:'5.3',
                        sum:10,
                        checked:true
                    },
                    {
                        name:'桔子',
                        price:'2.4',
                        sum:3,
                        checked:true
                    },
                    {
                        name:'香蕉',
                        price:'1.4',
                        sum:4,
                        checked:true
                    },
                    {
                        name:'西瓜',
                        price:'0.8',
                        sum:6,
                        checked:true
                    }
                ],
                sumprice:0,
                sumprices:false,
                isCheck:true

            },
            mounted(){
                this.pd()
                this.zongjia()

            },
            methods:{
                remove(index){
                    this.arr.splice(index,1)
                    this.pd()
                },
                pd(){
                    if(this.arr.length){
                        this.sumprices = false
                        console.log(this.arr.length);
                    }else{
                        this.sumprices = true
                    }
                    // if(this.sumprice == 0){
                    //     this.sumprices = false
                    // }else {
                    //     this.sumprices = true
                    // }
                },
                zongjia(){
                    let cs = 0
                    // let  zhege = this.arr.forEach((item)=>item.checked)
                    this.arr.forEach(
                        item => {
                            if(item.checked){
                                cs += item.price * item.sum
                            }
                    });
                    this.sumprice = cs.toFixed(2)
                    console.log( cs.toFixed(2));
                },
                qbrem(){
                    this.arr.splice(0)
                },
                choose(index){
                        this.arr[index].checked = !this.arr[index].checked
                },
                all(){
                    this.arr.forEach(
                        item=>{
                            item.checked = true
                        }
                    )
                },
                qc(){
                    this.arr.forEach(
                        item=>{
                            item.checked = false
                        }
                    )
                },
                fx(){
                    this.arr.forEach(
                        item=>{
                            item.checked = !item.checked
                        }
                    )
                }
            }
        })
    </script>
</body>
</html>